<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>成绩统计</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs">作业管理系统</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/teacher/assignment/list">作业管理</a></li>
            </ul>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" style="padding: 15px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-font-16">成绩统计 - ${assignment.title}</span>
                    <a href="${pageContext.request.contextPath}/teacher/assignment/list" 
                       class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;">
                        <i class="layui-icon layui-icon-return"></i>返回列表
                    </a>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <!-- 统计数据 -->
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">提交人数</div>
                                <div class="layui-card-body" style="height: 60px;">
                                    <h1 style="text-align: center; line-height: 60px;">${stats.submitCount}</h1>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">平均分</div>
                                <div class="layui-card-body" style="height: 60px;">
                                    <h1 style="text-align: center; line-height: 60px;">${stats.avgScore}</h1>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">最高分</div>
                                <div class="layui-card-body" style="height: 60px;">
                                    <h1 style="text-align: center; line-height: 60px;">${stats.maxScore}</h1>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-card">
                                <div class="layui-card-header">最低分</div>
                                <div class="layui-card-body" style="height: 60px;">
                                    <h1 style="text-align: center; line-height: 60px;">${stats.minScore}</h1>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 图表展示 -->
                    <div class="layui-row layui-col-space15" style="margin-top: 15px;">
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">分数分布</div>
                                <div class="layui-card-body">
                                    <div id="scoreChart" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">提交时间分布</div>
                                <div class="layui-card-body">
                                    <div id="timeChart" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            // 初始化分数分布图表
            var scoreChart = echarts.init(document.getElementById('scoreChart'));
            scoreChart.setOption({
                title: {
                    text: '分数分布'
                },
                tooltip: {},
                xAxis: {
                    data: ['0-60', '60-70', '70-80', '80-90', '90-100']
                },
                yAxis: {},
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: ${stats.scoreDistribution}
                }]
            });
            
            // 初始化提交时间分布图表
            var timeChart = echarts.init(document.getElementById('timeChart'));
            timeChart.setOption({
                title: {
                    text: '提交时间分布'
                },
                tooltip: {},
                xAxis: {
                    type: 'time',
                    axisLabel: {
                        formatter: '{MM-dd HH:mm}'
                    }
                },
                yAxis: {},
                series: [{
                    name: '提交数',
                    type: 'line',
                    data: ${stats.timeDistribution}
                }]
            });
        });
    </script>
</body>
</html> 